<template>
    <div>
       <table class="table table-bordered">
        <tbody>
            <tr>
                <td>Id</td>
                <td>门店名称</td>
                <td>电话</td>
                <td>图片</td>
                <td>地址</td>
                <td>酒店特色</td>
            </tr>
            <tr v-for="item in data.list" :key="item.Id">
                <td>{{ item.Id }}</td>
                <td>{{ item.ShopName }}</td>
                <td>{{ item.Phone.substring(0,3)+"****"+item.Phone.substring(7) }}</td>
                <td><img :src="item.Photo" alt="" width="100" height="100"></td>
                <td>{{ item.Address }}</td>
                <td>{{ item.TeSeName }}</td>
            </tr>
        </tbody>
       </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive}from 'vue';
 let data = reactive({
    list:[
    {
      "Id": 1,
      "ShopName": "北京如家酒店",
      "Phone": "18888888888",
      "Photo": "https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",
      "Address": "北京昌平202",
      "TeSeName": "豪华婚宴"
    },
   {
      "Id": 2,
      "ShopName": "北京汉庭酒店",
      "Phone": "18899988888",
      "Photo": "https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380",
      "Address": "北京昌平201",
      "TeSeName": "豪华婚宴"
    },
 {
      "Id": 3,
      "ShopName": "北京花儿顿酒店",
      "Phone": "188777888866",
      "Photo": "https://img2.baidu.com/it/u=2116884723,4094686271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
      "Address": "北京昌平208",
      "TeSeName": "豪华婚宴"
    },
]})

</script>
<style scoped>

</style>